<script setup>
import { nextTick } from 'vue';
import FullScreen from '../components/FullScreen.vue';
import Temp from '../components/Temp.vue';

const props =  defineProps({
msg: {
    type: String,
    required: true
},
data: {
    type: Object,
    required: false,
    default (){
    return {telephone:'0592-50888888',fax:'0592-50888888',email:'sakes@hyvalve.net',address:'福建省厦门市湖里区火炬园马龙路387号盈趣科技大厦806'}
    }
}
})

const model = defineModel();

model.value = 0;
function changeModel(params) {
model.value = params;
}

function bindleUpDown(params){
let current = model.value + params;
let leng = props.data.length;
if(current<0)current = leng-1;
if(current>=leng)current = 0;
changeModel(current);
}

nextTick(()=>{
    const script = document.createElement('script');
    script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=e6a6952b17af1128bd77b7f8e3010f3c';
    document.head.appendChild(script);

    script.onload = ()=>{
        // 原本nextTick代码
    var position = [118.126260, 24.513192];
    var zoom  = 10000;
    var map = new AMap.Map('sitemapBox',{
        zoom: zoom,  //设置地图显示的缩放级别
        center: [(position[0]-20/zoom).toFixed(6),position[1]],//设置地图中心点坐标
        // layers: [new AMap.TileLayer.Satellite()],  //设置图层,可设置成包含一个或多个图层的数组
        mapStyle: 'amap://styles/977cafcb8a8e5b3c745b5c9a8548ff43',  //设置地图的显示样式
        viewMode: '2D',  //设置地图模式
        lang:'zh_cn',  //设置地图语言类型
    });
    map.setStatus({
        zoomEnable:false,
        dragEnable: false,
    });
    var title = '萨尔生产基地';
    var content = [];
    var icon = '/src/assets/frame_138.svg';
    var image = '/src/assets/Rectangle_70.jpg';
    // https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称
    var urls = 'https://uri.amap.com/marker?position='+position+'&name='+title;
    var infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: createInfoWindow(title),
        offset: new AMap.Pixel(16, 300)
    });
    map.clearMap();
    var marker = new AMap.Marker({
        map: map,
        position: position
    });
    //鼠标点击marker弹出自定义的信息窗体
    marker.on('click', function () {
        infoWindow.open(map, marker.getPosition());
    });
    
    infoWindow.open(map, marker.getPosition());
    //构建自定义信息窗体
    function createInfoWindow(title) {
        var info = document.createElement("div");
        info.className = "bg-white rounded-3xl overflow-hidden hover:bg-red mobile:hidden";

        //可以通过下面的方式修改自定义窗体的宽高
        info.style.width = "320px";
        // 定义顶部标题
        var show = document.createElement('img');
        var links = document.createElement('img');
        var bottom = document.createElement('div');
        var infor = document.createElement('p');

        show.src = image;
        show.className = 'w-full flex';
        bottom.className = 'w-full p-6 flex';
        infor.innerHTML = title;
        infor.className = 'text-2xl flex-auto';
        links.src = icon;
        links.className = 'flex-none w-8 h-8 hover:cursor-pointer hover:text-red';
        links.onclick = openLinks
        
        bottom.appendChild(infor);
        bottom.appendChild(links);
        info.appendChild(show);
        info.appendChild(bottom);

        return info;
    }

    //关闭信息窗体
    function closeInfoWindow() {
        map.clearInfoWindow();
    }
    // 跳转位置
    function openLinks(){
        console.log('点击的跳转链接')
        window.location.href = urls;
    }
        
    }

})
</script>

<template>
    <Temp lit=[]>
        <FullScreen>
            <div class="w-full pt-[150px] mobile:px-6 mobile:pt-[80px]">
                <div class="w-full h-full absolute left-0 top-0  shadowbox bg-[url('/src/assets/p2.jpg')]">
                    <div class="w-full h-screen sitemapBox" id="sitemapBox"></div>
                </div>
                <div class="w-full h-auto self-center bg-no-repeat pointer-events-none">
                    <div class="flex mb-[60px] mobile:my-10 relative z-10">
                        <span class="wen-index-title">联系我们</span>
                    </div>
                    <div class="w-full self-center mx-auto mt-[60px] pointer-events-none">
                        <ul class="w-full max-w-[320px] block relative mobile:max-w-full pointer-events-auto z-10 wow animate__animated animate__fadeInUp timing">
                            <li class="px-3 py-6 mb-6 rounded-2xl border bg-white hover:bg-gray-100">
                                <div class="flex w-full items-start">
                                    <img class="w-12 inline-block px-2 mobile:w-10" src="/src/assets/fa-phone.svg" >
                                    <div class="w-auto flex-auto">
                                        <p class="text-2xl mobile:text-lg">联系电话</p>
                                        <p class="text-gray2 pt-2 mobile:text-sm">{{ data.telephone }}</p>
                                    </div>
                                </div>
                            </li>
                            <li class="px-3 py-6 mb-6 rounded-2xl border bg-white hover:bg-gray-100">
                                <div class="flex w-full items-start">
                                    <img class="w-12 inline-block px-2 mobile:w-10" src="/src/assets/fa-fax.svg" >
                                    <div class="w-auto flex-auto">
                                        <p class="text-2xl mobile:text-lg">传真</p>
                                        <p class="text-gray2 pt-2 mobile:text-sm">{{ data.fax }}</p>
                                    </div>
                                </div>
                            </li>
                            <li class="px-3 py-6 mb-6 rounded-2xl border bg-white hover:bg-gray-100">
                                <div class="flex w-full items-start">
                                    <img class="w-12 inline-block px-2 mobile:w-10" src="/src/assets/fa-email.svg" >
                                    <div class="w-auto flex-autox">
                                        <p class="text-2xl mobile:text-lg">邮箱</p>
                                        <p class="text-gray2 pt-2 mobile:text-sm">{{ data.email }}</p>
                                    </div>
                                </div>
                            </li>
                            <li class="px-3 py-6 mb-6 rounded-2xl border bg-white hover:bg-gray-100">
                                <div class="flex w-full items-start">
                                    <img class="w-12 inline-block px-2 mobile:w-10" src="/src/assets/fa-address.svg" >
                                    <div class="w-auto flex-auto">
                                        <p class="text-2xl mobile:text-lg">联系地址</p>
                                        <p class="text-gray2 pt-2 mobile:text-sm">{{ data.address }}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </FullScreen>
    </Temp>
</template>
<style scoped>
ul.grid li.active{
  border-color: #2F3767;
  color: #2F3767
}
.mask::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #2F3767cc;
    pointer-events: none;
}

.shadowbox::before{
    content: '';
    width: 66%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, #ffff, #fff0);
    pointer-events:none;
    z-index: 1;
}
.shadowbox::after{
    content: '';
    width: 18.75%;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background-image: linear-gradient(to right, #fff0, #ffff);
    pointer-events:none;
    z-index: 1;
}
</style>